/**
 * Created by HuQiang on 2017/8/4.
 */
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
import {Button, Input, Modal} from 'antd';
require("./Home.css");
require("./ChangePwd.css");
import $ from "jquery";

export default class ChangePwd extends React.Component {
    constructor(props) {
        super(props);
        const userSessionStorage = JSON.parse(window.sessionStorage.getItem("userStorage"));
        if (userSessionStorage !== null) {
            this.state = {
                id: userSessionStorage.data.id,
                password: "",
                new_password: "",
                new_password_again: ""
            }
        }
    }

    handleSubmit = (e) => {
        e.preventDefault();
        if (this.state.new_password_again !== this.state.new_password) {
            Modal.error({
                title: '温馨提示',
                content: '两次密码输的不一致'
            });
            return;
        }
        $.ajax({
            type: "POST",
            url: "http://123.207.214.129:9090/LanOu/updatePassword",
            data: {
                id: this.state.id,
                password: this.state.password,
                new_password: this.state.new_password
            },
            dataType: "json",
            success: (data) => {
                if (data.msg === "原始密码错误") {
                    Modal.error({
                        title: '温馨提示',
                        content: "原密码错误！"
                    });
                } else if (data.msg === "成功") {
                    Modal.success({
                        title: '温馨提示',
                        content: "密码修改成功！"
                    });
                    ReactDOM.findDOMNode(this.refs.old_password).value = "";
                    ReactDOM.findDOMNode(this.refs.new_password).value = "";
                    ReactDOM.findDOMNode(this.refs.new_password_again).value = "";
                }
                console.log(data);
            },
            error: function (e) {
                console.log(e);
            }
        });
    };

    render() {
        return (
            <div>
                <div className="title-pwd">
                    <p>修改密码</p>
                </div>
                <div className="body-pwd">
                    <form>
                        <p>
                            原密码:<Input style={inputStyle} size="large" placeholder="请输入你的原密码"
                                       ref="old_password"
                                       type="password"
                                       onChange={(e) => {
                                           this.setState({
                                               password: e.target.value
                                           })
                                       }}/>
                        </p>
                        <p>
                            新密码:<Input style={inputStyle} size="large" placeholder="请输入你的新密码"
                                       ref="new_password"
                                       type="password"
                                       onChange={(e) => {
                                           this.setState({
                                               new_password: e.target.value
                                           })
                                       }}/>
                        </p>
                        <p>
                            新密码确认:<Input style={inputStyle} size="large" placeholder="请再输一遍你的新密码"
                                         ref="new_password_again"
                                         type="password"
                                         onChange={(e) => {
                                             this.setState({
                                                 new_password_again: e.target.value
                                             })
                                         }}/>
                        </p>
                        <form onSubmit={(e) => {
                            this.handleSubmit(e)
                        }}>
                            <Button style={buttonStyle} type="default" htmlType="submit">
                                提交
                            </Button>
                        </form>
                    </form>
                </div>
            </div>
        );
    }
}
const inputStyle = {
    display: 'block',
    width: '20rem',
    marginTop: '0.3rem',
    marginBottom: '0.3rem',
};

const buttonStyle = {
    display: 'block',
    width: '6rem',
    marginTop: '1rem',
    marginLeft: '7rem'
};

